<template>
  <div>
    <el-form
      :ref="'prizeForm' + index"
      class="prize-form"
      label-width="85px"
      size="small"
      :class="{'mb20': index !== prizeForm.length-1}"
      :model="prizeForm[index]"
      :rules="prizeFormRules"
      >
      <el-row>
        <el-col :span="24">
          <el-form-item label="奖品名称:" prop="prize_name">
            <el-input v-model="prizeForm[index].prize_name" placeholder="请输入奖品名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="中奖概率:" prop="probability">
            <el-input v-model="prizeForm[index].probability" placeholder="请输入中奖概率"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="奖品份数:" prop="prize_num">
            <el-input-number v-model="prizeForm[index].prize_num" placeholder="请输入奖品份数" :min="1" :max="10000"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="奖品类型:" prop="prize_type">
            <el-select v-model="prizeForm[index].prize_type" clearable placeholder="请选择奖品类型">
              <el-option label="实物奖品" value="1"></el-option>
              <el-option label="优惠券" value="2"></el-option>
              <el-option label="虚拟奖品" value="3"></el-option>
              <el-option label="谢谢参与" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出库时效:" prop="delivery_type">
            <el-select v-model="prizeForm[index].delivery_type" clearable placeholder="请选择出库时效">
              <el-option label="即时出库" value="1"></el-option>
              <el-option label="延迟出库" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="奖品图片:" prop="prize_img">
            <template slot-scope="scope">
              <div @click="curImgIndex = index">
                <upload-sortable
                  class="avatar-uploader goods-images"
                  v-if="!prizeForm[index].prize_img"
                  :goodsGalleryList='receiveFormImgList[index]'
                  @change="handlePictureChange">
                </upload-sortable>
                <div v-if="prizeForm[index].prize_img" class="prize-img">
                  <img width="100%" :src="prizeForm[index].prize_img" alt="">
                </div>
              </div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { UploadSortable } from '@/components'
export default {
  name: 'dispatch',
  props: {
    formData: Object,
    prizeForm: Object,
    prizeFormRules: Object,
    index: Number
  },
  components: {
    [UploadSortable.name]: UploadSortable
  },
  data () {
    return {
      receiveFormImgList: [],
      curImgIndex: 0,
      /** 商品图片放大地址 */
      dialogImageUrl: '',
      /** 是否显示放大图片弹框 */
      dialogImage: false
      // curImgIndex: 0,
    }
  },
  methods: {
    /** 奖品图片 改变时触发*/
    handlePictureChange(fileList) {
      this.receiveFormImgList[this.curImgIndex] = fileList
      this.prizeForm[this.curImgIndex].prize_img = fileList
    },
    validate () {
      return new Promise((resolve, reject) => {
        this.$refs.prizeForm.validate(valid => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .prize-form .el-input-number--small, .prize-form .el-select.el-select--small {
    width: 100%;
  }
</style>